<template>
    <div class="common-layout">
        <el-config-provider :size="size" :locale="locale">
            <el-container>
                <!-- 左侧内容 -->
                <el-aside width="auto">
                    <!-- menu菜单组件 props传值 -->
                    <TreeMenu :is-collapse="isCollapse"></TreeMenu>
                </el-aside>
                <el-container>
                    <!-- 头部内容 -->
                    <el-header>
                        <el-row>
                            <el-col :span="12">
                                <!-- 面包屑组件 -->
                                <HeaderBreadcrumb @change-collapse="isCollapse = $event"></HeaderBreadcrumb>
                            </el-col>
                            <el-col :span="12">
                                <div class="colRight">
                                    <fullScreen></fullScreen><!-- 设置全屏组件 -->
                                    <el-divider direction="vertical" /><!--分割线-->
                                    <sizeChange @changeSize="changeSize"></sizeChange><!-- 设置尺寸组件 -->
                                    <el-divider direction="vertical" />
                                    <language @tongue="lingo"></language><!--设置语言组件-->
                                    <el-divider direction="vertical" />
                                    <HeaderUser></HeaderUser><!--头像组件-->
                                </div>
                            </el-col>
                        </el-row>
                        <!-- 动态标签组件 -->
                        <HeaderTag></HeaderTag>
                    </el-header>
                    <!-- 主体内容 -->
                    <el-main>
                        <RouterView />
                    </el-main>
                </el-container>
            </el-container>
        </el-config-provider>
    </div>
</template> 

<script lang="ts" setup>
// 中英文语言包
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import En from 'element-plus/lib/locale/lang/en'
import { ref } from 'vue'
const isCollapse = ref(false)//判断菜单是否折叠
// 使用本地存储是在刷新时的尺寸大小还是之前下拉菜单选中的尺寸大小，否则就是默认尺寸
let size = ref((<any>localStorage.getItem('size') || 'default'))
// 当前语言环境
let locale = ref(localStorage.getItem('language') == 'zh' ? zhCn : En)
// 自定义事件改变整体尺寸
const changeSize = (checkSize: string) => {
    size.value = checkSize //尺寸组件传递过来的大小参数
}
// 改变当前语言
const lingo = () => {
    locale.value = localStorage.getItem('language') == 'zh' ? zhCn : En
}
</script>

<style lang="less" scoped>
.common-layout {
    position: absolute;
    width: 100%;
    height: 100%;
}

.el-container {
    height: 100%;
}

.el-header {
    background-color: white;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    height: auto;
    padding: 20px 15px 0px;

    .el-row {
        margin-bottom: 20px;
    }
}

.colRight {
    text-align: right;
}

.el-aside {
    background-color: #304151;
    overflow: hidden;
}

.el-main {
    background-color: white;
    color: #333;
}
</style>